<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    :fill="fill"
    :class="iconClass">
    <path
      d="M8.09143 4C5.07221 4 2.5 6.2944 2.5 9.27426C2.5 11.3299 3.44712 13.0606 4.70236 14.4943C5.95329 15.923 7.56719 17.1222 9.0262 18.1259L11.5436 19.8578C11.8192 20.0474 12.1808 20.0474 12.4564 19.8578L14.9738 18.1259C16.4328 17.1222 18.0467 15.923 19.2976 14.4943C20.5529 13.0606 21.5 11.3299 21.5 9.27426C21.5 6.2944 18.9278 4 15.9086 4C14.3522 4 12.9827 4.74167 12 5.70133C11.0173 4.74167 9.64777 4 8.09143 4Z"
      :stroke="color"
      stroke-linecap="round"
      stroke-linejoin="round" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
    fill?: string;
    strokeWidth?: number | string;
    iconClass?: string;
  }

  withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#F76B1B',
    fill: 'none',
    strokeWidth: 1,
    iconClass: '',
  });
</script>
